import { connect } from 'react-redux'
import { Spin, Button } from 'antd'

import "antd/dist/antd.css"

import './App.css';

import * as userActions from './store/actions/user'

import * as Constant from './constants'

function App({ dispatch, user }) {

  return (
    <div className="App">
      <header className="App-header">
        <h1>{user.count}</h1>
        <div>
          {user.isLoading ? (
            <div>
              <Spin size="large" />
            </div>
          ) : ''}
        </div>
        <Button type="primary" onClick={() => {
          dispatch(userActions.login())
        }} >Login</Button>
        <Button
          onClick={() => {
            dispatch({type: Constant.GET_USER})
          }}
        >
          GET_USER
        </Button>
        <Button
          onClick={() => {
            dispatch({type: Constant.GET_BAlANCE})
          }}
        >
          GET_BAlANCE
        </Button>
      </header>
    </div>
  );
}

const mapState = state => ({
  user: state.user
})

export default connect(mapState)(App);
